<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div id="phoneCharts" style="height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div id="loggedWeekCharts" style="height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div id="registerWeekCharts" style="height: 300px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLoggedWeek, getPayedOrderWeek, getPhone, getRegisterWeek } from '@/api/index'

export default {
  name: 'Home',
  data() {
    return {
      option: {
        backgroundColor: '#FFFFFF'
      }
    }
  },
  methods: {
    // 统计近7天订单数量
    payedOrderWeekCharts() {
      const payOrderWeekChart = this.$echarts.init(document.getElementById('payOrderWeekCharts'));
      // 展示加载动画
      payOrderWeekChart.showLoading();
      getPayedOrderWeek().then(res => {
        // 隐藏动画
        payOrderWeekChart.hideLoading();
        payOrderWeekChart.setOption({
          title: {
            text: '近7天下单数量统计',
            left: 'center'
          },
          color: ['#fac858'],
          xAxis: {
            type: 'category',
            data: res.data.labels
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: res.data.counts,
            type: 'line',
            itemStyle: { normal: { label: { show: true } } }
          }]
        })
      }).catch(err => err)
    },
    // 统计近7天注册情况
    registerWeekCharts() {
      const registerWeekChart = this.$echarts.init(document.getElementById('registerWeekCharts'), this.option)
      // 展示加载动画
      registerWeekChart.showLoading()
      getRegisterWeek().then(res => {
        // 隐藏动画
        registerWeekChart.hideLoading()
        registerWeekChart.setOption({
          title: {
            text: '近七天注册人数',
            left: 'center'
          },
          color: ['#73c0de'],
          xAxis: {
            type: 'category',
            data: res.data.data.lables
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: res.data.data.counts,
            type: 'line',
            itemStyle: { normal: { label: { show: true } } }
          }]
        })
      }).catch(err => err)
    },

    // 统计近7天登录情况
    loggedWeekCharts() {
      const loggedWeekChart = this.$echarts.init(document.getElementById('loggedWeekCharts'), this.option)
      // 展示加载动画
      loggedWeekChart.showLoading();
      getLoggedWeek().then(res => {
        // 隐藏动画
        loggedWeekChart.hideLoading();
        loggedWeekChart.setOption({
          title: {
            text: '近七天登录人数',
            left: 'center'
          },
          color: ['#ee6666'],
          xAxis: {
            type: 'category',
            data: res.data.data.lables
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: res.data.data.counts,
            type: 'line',
            itemStyle: { normal: { label: { show: true } } }
          }]
        });
      }).catch(err => err)
    },

    // 统计绑定手机
    phoneCharts() {
      // 基于准备好的dom，初始化echarts实例
      const phoneChart = this.$echarts.init(document.getElementById('phoneCharts'), this.option);
      // 展示加载动画
      phoneChart.showLoading();
      getPhone().then(res => {
        // 隐藏动画
        phoneChart.hideLoading();
        phoneChart.setOption({
          color: ['#fac858', '#ee6666'],
          title: {
            text: '绑定手机情况',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '绑定手机情况',
              type: 'pie',
              radius: '50%',
              data: res.data.data,
              // data: [
              //   {value: 484, name: '已绑定'},
              //   {value: 300, name: '未绑定'}
              // ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true,
                formatter: '{b} : {c} ({d}%)'
              },
              labelLine: { show: true } // 显示线条
            }
          ]
        })
      }).catch(err => err)
    }
  },
  mounted() {
    this.phoneCharts();// 统计绑定手机
    this.loggedWeekCharts();// 统计近7天登录
    this.registerWeekCharts();// 统计近7天注册
    // this.payedOrderWeekCharts(); // 统计近7天下单量
  }
}
</script>

<style scoped>
/*.bg-purple {*/
/*  background: #c6a4a4;*/
/*}*/

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

</style>
